<template>
   <div class="footer">
      <div class="head">
        <img src="carimg/3.png" alt="" />
        <b>为你推荐</b>
        <img src="carimg/4.png" alt="" />
      </div>
      <div class="foot">
        <div class="box" v-for="(v,i) in this.$store.state.carbottom.obj" :key="i" @click="fun()" >
          <img :src="v.img">
          <h3>{{v.title}}</h3>
          <p>{{v.text}}</p>
          <span>￥<i>{{v.price}}</i>起</span>
        </div>
        </div>
  </div>
</template>

<script>
export default {
    mounted(){
        this.$store.dispatch("carbottom")
    },
    methods:{
      fun(){
       this.$router.push("/zhanshi")
      }
    }
}
</script>

<style scoped>
.footer {
  width: 100%;
  transform: translateY(-6rem);
}
.footer .head {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
}
.footer .head img {
  width: 0.2rem;
  height: 0.2rem;
  margin: 0 0.1rem;
}
.footer .head b {
  display: inline-block;
  font-size: 0.16rem;
}
.footer .foot{
  width: 100%;
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-evenly;
}
.footer .foot .box{
  width: 46%;
  height: 3.08rem;
  background-color: #fff;
  border-radius: 0.1rem;
  margin-bottom: 0.15rem;
}
.footer .foot .box img{
  width: 100%;
  height: 1.89rem;
  border-radius: 0.1rem 0.1rem 0 0 ;
}
.footer .foot .box h3{
  font-size: 0.14rem;
  line-height: 0.1rem;
  text-align: left;
  text-indent: 0.1rem;
}
.footer .foot .box p{
  font-size: 0.1rem;
   line-height: 0.3rem;
   text-align: left;
   text-indent: 0.1rem;
}
.footer .foot .box span{
    display: inline-block;
    font-size: 0.08rem;
  color: #f82400;
  transform: translateY(-0.88rem) translateX(-0.55rem);
}
.footer .foot .box span i{
  font-size: 0.16rem;
  color: #f82400;
  font-style: normal;
}

</style>